<%@page import="transfer.CommodityCategory"%>
<%@page import="java.util.ArrayList"%>
<%@page import="content.CategoryContent"%>
<%@page import="transfer.Commodity"%>
<%@page import="content.CommodityContent"%>

<%

%>
<div class="img-big-view" >
    <div class="float_left">
        <img id="picture_commodity" src="">
        <div></div><input type="button" value="Change Picture" id="add-picture" onclick="$('#selectFile').click()"/>
        <form id="form-image" enctype="multipart/form-data" action="PictureLoader" method="post" class="hidden">
            <div></div><input onchange="fileSelected(this)" name="imageSelection" type="file" id="selectFile" accept="image/x-png, image/jpeg" /><br/>
            <input id="commodity_id" name="idCommodity" value=""/>
            <input id="file_name" name="fileName" value=""/>
        </form>
    </div>
</div>
<div class="float_left" style="width: 620px" >
    <br/><br/>
    <div>
    <div class="table-view">
        <H3>
        <div>Name:<span class="text-red">*</span></div><input id="name_commodity" type="text" required="" /><br/>
        </H3>
        </div>
    </div>
    <div style="margin-top: 15px;">
    <div class="table-view">
        <H3>
            <div>Category:<span class="text-red">*</span></div>
            <%
                ArrayList categories = CategoryContent.getCategories(10);
            %>
            <select id="categories_selection">
                <%
                    if (categories != null) {
                        for (int i = 0; i < categories.size(); i++) {
                            CommodityCategory cc = (CommodityCategory) categories.get(i);
                %>
                            <option value="<%= cc.getIdCategory() %>"><%= cc.getNameCategory() %></option>
                <%
                        }
                    }
                %>
            </select><br/>
        </H3> 
        </div>
    </div>
    <div style="margin-top: 15px;">
        <div class="table-view">
        <H3>
            <div>Price:<span class="text-red">*</span></div> <input onkeydown="javascript: return price_commodity_changed(event)" id="price_commodity" type="text" required="" /><br/>
        </H3>
        </div>
    </div>
</div>        

<div class="description">
    <H3>
        <div style="vertical-align: top;">Description:<span class="text-red">*</span></div> <textarea id="desc_commodity" style="height: 250px; width: 804px;" ></textarea><br/>    
    </H3>
</div>